<template>
    <div >
        <div class="title">
                <img class="hot" src="../../../assets/images/hotpoint.png">
            <div class="more">
                <a href="##">查看更多></a>
            </div>
        </div>
        <ul class="list">
            <li v-for="item in news" :key="item.id">
                <van-row>
                    <van-col span="3"><span class="red">最新</span></van-col>
                    <van-col span="19">{{ item.title }}</van-col>
                    <van-col span="2"><van-icon color="#aaa" name="arrow" /></van-col>
                </van-row>
            </li>
        </ul>
    </div>
  </template>
  
<script>
    export default {
        props:['news']   //可以直接接传过来的参数，也可以以对象形式，声明数据类型和默认值
    }
</script>



<style lang="less" scoped>
    .title{
        margin: 0.2rem;
        display: flex;
        //伪类生成竖线
        &::before{
            content: "";
            width: 0.1rem;
            height: 0.32rem;
            margin: 0.05rem;
            background:#4169e2;
        }

        .hot{
            width: 1.4rem;
            margin-left: 0.14rem;
            height: 0.48rem;
        }
        .more{
            flex: 1;
            text-align: right;
        }
    }
    .list{
        margin: 0.2rem;
        border-bottom: 1px solid #aaa;
        li{
            padding-bottom: 0.1rem;
            font-size: 0.3rem;
            margin-bottom: 0.2rem;
            line-height: 0.4rem;
            color: 1a1a1a;
        }
        .red{
            display: inline-block;
            background: #ff5555;
            padding: 0.02rem 0.04rem;
            color: #fff;
            font-size: 0.26rem;
            border-radius: 0.02rem;
        }
    }
</style>
  